<script>
  const isInContainer = (
    el,
    container,
    offset = {
      topOffset: 0,
      bottomOffset: 0,
      rightOffset: 0,
      leftOffset: 0
    }
  ) => {
    if (!el || !container) return false

    const elRect = el.getBoundingClientRect()
    let containerRect

    if ([window, document, document.documentElement, null, undefined].includes(container)) {
      containerRect = {
        top: 0,
        right: window.innerWidth,
        bottom: window.innerHeight,
        left: 0
      }
    } else {
      containerRect = container.getBoundingClientRect()
    }

    return (
      (offset.topOffset ? elRect.top - offset.topOffset : elRect.top) < containerRect.bottom &&
      (offset.bottomOffset ? elRect.bottom - offset.bottomOffset : elRect.bottom) > containerRect.top &&
      (offset.rightOffset ? elRect.right - offset.rightOffset : elRect.right) > containerRect.left &&
      (offset.leftOffset ? elRect.left - offset.leftOffset : elRect.left) < containerRect.right
    )
  }

  export default {
    name: 'NavTabPanel',
    provide() {
      return {
        store: this.store
      }
    },
    props: {
      cascade: Boolean,
      padding: {
        type: String,
        default: '0'
      }
    },
    data() {
      return {
        activeIndex: '0',
        store: {
          tabs: []
        }
      }
    },
    methods: {
      tabClick(tab) {
        this.$emit('handleTabChange', tab)
        if (typeof this.$refs.scroller !== 'undefined') {
          this.$refs.scroller.scrollTop = this.$refs.scroller.children[tab.index].offsetTop
        }
      },
      tryActive() {
        for (let i = 0; i < this.$refs.scroller.children.length; i++) {
          if (isInContainer(this.$refs.scroller.children[i], this.$refs.scroller, 0)) {
            this.activeIndex = `${i}`
            break
          }
        }
      }
    },
    render() {
      return this.cascade ? (
        <div class="nav-tab-panel">
          <div class="flex-not-shrink" style="min-width: 100px;height: 100%;">
            <el-tabs
              tab-position="left"
              class="nav-tab-panel-tabs"
              style="height: 100%;"
              vModel={this.activeIndex}
              on-tab-click={this.tabClick}>
              {this.store.tabs.map((tab, index) => (
                <el-tab-pane label={tab.title} name={`${index}`} key={tab.title} />
              ))}
            </el-tabs>
          </div>
          <div class="cascade-content" on-scroll={this.tryActive} ref="scroller" style={{ padding: this.padding }}>
            {this.$slots.default || '请添加内容'}
          </div>
        </div>
      ) : (
        <el-tabs
          tab-position="left"
          class="nav-tab-panel-tabs"
          style="height: 100%;"
          vModel={this.activeIndex}
          on-tab-click={this.tabClick}>
          {this.$slots.default}
        </el-tabs>
      )
    }
  }
</script>

<style lang="scss">
  .nav-tab-panel {
    @include flex-row;
    height: 100%;

    .cascade-content {
      @include flex-item;
      position: relative;
      height: 100%;
      overflow: auto;
    }
  }

  .nav-tab-panel-tabs {
    background-color: #fff;

    &.el-tabs--left .el-tabs__header.is-left {
      margin-right: 1px;
    }

    .el-tabs__content {
      height: 100%;
      overflow: auto;
    }
  }
</style>
